<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <van-field required v-model="postData.skill_Name" size="large" label="技能名称" maxlength="25" placeholder="请填写" style="font-size: 16px" />

      <van-field required readonly clickable size="large" :value="postData.skill_Level" label="熟练程度" placeholder="请选择" style="font-size: 16px" @click="showPicker_level = true" />
      <van-popup v-model="showPicker_level" round position="bottom">
        <van-picker title="熟练程度" show-toolbar :columns="picker_level_data" :default-index="picker_level_defaultIndex" @confirm="onPickerLevelSubmit" @cancel="showPicker_level = false" />
      </van-popup>

      <div style="margin: 16px">
        <van-button type="primary" block color="#05A6F0" round style="font-size: 18px" text="提交" :loading="loading_submit" :disabled="disabled_submit" @click="onSubmit">
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue'
import { Field, Picker, Popup, Button, Toast } from 'vant';
import { GetSkillLevel } from '@/util/selectData'
import { mixin_person_resumeSumbitBack } from '@/mixin/mixins'
import Global from '@/Global';
export default {
  name: 'ResumeSkill',
  components: {
    NavBar,
    [Field.name]: Field,
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Button.name]: Button,
  },
  props: ['title', 'data'],
  mixins: [mixin_person_resumeSumbitBack],
  mounted() {
		this.postData.id = this.$route.params.data ? this.$route.params.data.id : 0;
		if(this.postData.id != 0){
			this.$api.get('/Resume/GetSkillInfo',{id:this.postData.id}).then(res=>{
				if(res.success){
					this.postData.skill_Name = res.response.skill_Name;
					this.postData.skill_Level = res.response.skill_level
				}
			})
		}
  },
  // 定义属性
  data() {
    return {
      postData: {
        id: 0,
        skill_Name: '',
        skill_Level: ''
      },
      showPicker_level: false,
      picker_level_data: GetSkillLevel(),
      picker_level_defaultIndex: 0,

      loading_submit: false,
    }
  },
  computed: {
    disabled_submit() {
      if (this.postData.skill_Name != '' && this.postData.skill_Level != '')
        return false;
      return true;
    }
  },
  // 方法集合
  methods: {
    onPickerLevelSubmit(value) {
      this.showPicker_level = false;
      this.postData.skill_Level = value;
    },
    //提交
    onSubmit() {
      this.loading_submit = true;
			this.$api.post('/Resume/SaveSkill',this.postData).then(res=>{
				this.loading_submit = false;
				if(res.success){
					Toast.success('保存成功');
					this.$bus.$emit(Global.bus_person_resume_update, 'ok');
					this.goBack();
				}
				else{Toast.fail(res.msg)}
			})
    }
  },
}
</script>

<style scoped>
</style>